<template>
  <view>
    <view class="submit-button" @click="submitButton" :style="styleOptions">
      <view class="loading" v-if="loading">
        <u-loading-icon mode="semicircle" color="#ffffff"></u-loading-icon>
      </view>
      <template v-if="text">
        <text class="t">{{text}}</text>
      </template>
      <template v-else>
        <template v-if="!loading">
          <slot></slot>
        </template>
      </template>
    </view>
    <view :style="'height: '+gStore.safeAreaBottom+'px;'"></view>
  </view>
</template>
	
<script setup>
import { ref, computed } from "vue";
import { globalStore } from "@/store";
const gStore = globalStore();
const emit = defineEmits(["change"]);
var props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  backgroundColor: {
    type: String,
    default: "#fe9900",
  },
  radius: {
    type: String,
    default: "16rpx",
  },
  text: {
    type: String,
    default: "",
  },
});
var loading = ref(false);
var styleOptions = ref("");
styleOptions = computed(() => {
  return `background-color:${props.backgroundColor};border-radius:${props.radius}`;
});
loading = computed(() => props.loading);

const submitButton = () => {
  emit("change");
};
</script>

<style lang="scss">
.submit-button {
  padding: 22rpx 0;
  line-height: 48rpx;
  display: flex;
  justify-content: center;
  .t {
    font-size: 32rpx;
    color: #fff;
  }
}
</style>